// 这个组件是todolist列表项的内容
<template>
  <div>
    <ul v-if="TodoListIns.todoList.length > 0">
      <!-- item => 将item传递给子组件 -->
      <!-- toggleCompleted => 来自子组件传递的事件 -->
      <!-- removeTodo => 来自子组件传递的事件 -->
      <todo-item
        v-for="item of data"
        :key="item.id"
        :item="item"
        @toggleCompleted="toggleCompleted"
        @removeTodo="removeTodo"
      ></todo-item>
    </ul>
    <!-- 如果todoList为空时 -->
    <p v-else>--当前没有数据--</p>
  </div>
</template>

<script>
import TodoItem from "./TodoItem.vue";

export default {
  name: "Todos",
  props: ["data"],
  //需要响应式数据来是否渲染组件
  //直接拿到todolist实例
  inject: ["TodoListIns"],
  components: {
    TodoItem,
  },
  methods: {
    toggleCompleted(id) {
      this.$emit("toggleCompleted", id);
    },
    removeTodo(id) {
      this.$emit("removeTodo", id);
    },
  },
  mounted() {
    // console.log(this.TodoListIns);
  },
};
</script>